<template>
    <div class="progressContainer">
        <div class="progressItem" :style="{width:barwidth+'%'}"></div>
    </div>
</template>

<script>
    export default {
        data() {
            return {

            }
        },
        props: ['total','rest','barwidth']
    }
</script>

<style lang="less" rel="stylesheet/less" scoped>
    .progressContainer {
        position: relative;
        height: .5rem;
        width: 80%;
        background: #aaa;
        border-radius: 5px;

        .progressItem {
            position: absolute;
            height: .5rem;
            transition:width .5s;
            border-radius: 5px;
            border: .01rem solid orange;
            background-image: linear-gradient(100deg,rgba(255, 255, 255, .15) 25%,transparent 25%,transparent 50%,
            rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
            background-color: orange;
        }
    }
</style>